<template>
<el-card class="box-card">
    <div>
        <el-row :gutter="1">
            <el-col :span="5">姓名：<el-input style="width:200px" v-model="queryName" placeholder="姓名查询"></el-input></el-col>
            <el-col :span="5">单位：<el-input style="width:200px" v-model="queryCompany"  placeholder="单位查询"></el-input></el-col>
            <el-col :span="10">订单日期：
                <el-date-picker
                    value-format="timestamp"
                    v-model="datePicker"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-col>
            <el-col :span="2"><el-button type="primary" @click="getOrders">查询</el-button></el-col>
            <el-col :span="2"><el-button type="primary" @click="getQueryOrderType">重置</el-button></el-col>
        </el-row>
        <br>
        <el-row :gutter="10">
            <el-col :span="6">类型:<br>
                <el-radio-group v-model="queryOrderType" @change="checkoutOrderType">
                    <el-radio :label="1">全部</el-radio>
                    <el-radio :label="2">合伙人</el-radio>
                    <el-radio :label="3">大客户</el-radio>
                </el-radio-group>
            </el-col>
            <el-col :span="6">卡类型：<br>
                <el-radio-group v-model="queryCardType" @change="checkoutCardType">
                    <el-radio :label="1">全部</el-radio>
                    <el-radio :label="2">虚拟卡</el-radio>
                    <el-radio :label="3">实体卡</el-radio>
                </el-radio-group>
            </el-col>
            <el-col :span="6">
                <el-button type="primary" @click="exportExcel('orderList')">导出到Excel</el-button>
            </el-col>
        </el-row>
        <br>
        <el-table ref="orderListData" :data="orderListData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
            <el-table-column fixed="left" prop="order_number" label="订单编号" width="width"></el-table-column>
            <el-table-column prop="order_quantity" label="订单数量" width="width"></el-table-column>
            <el-table-column prop="name" label="名称" width="width"></el-table-column>
            <el-table-column prop="company" label="单位" width="width"></el-table-column>
            <el-table-column prop="create_time" label="创建时间" width="width"></el-table-column>
            <el-table-column prop="product_name" label="产品名称" width="width"></el-table-column>
            <el-table-column prop="index" label="单价" width="width"></el-table-column>
            <el-table-column prop="index" label="支付金额" width="width"></el-table-column>
            <el-table-column prop="pay_method" label="支付方式" width="width"></el-table-column>
            <el-table-column prop="pay_date" label="支付时间" width="width"></el-table-column>
            <el-table-column prop="pay_status" label="支付状态" width="width"></el-table-column>
            <el-table-column prop="card_type" label="卡类" width="width"></el-table-column>
            <el-table-column prop="type" label="类型" width="width"></el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[4,8]"
            :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total='orderListData.length'>
        </el-pagination>
    </div>
</el-card>
</template>
<style>

    
</style>
    

<script>

import FileSaver from 'file-saver';
import XLSX from 'xlsx';

//js日期格式化yyyy-MM-dd
Date.prototype.format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份
        "d+": this.getDate(), //日
        "h+": this.getHours(), //小时
        "m+": this.getMinutes(), //分
        "s+": this.getSeconds(), //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
    }
    return fmt;
}


    export default {
        name:'orderList',
        data(){
            return {
                orderListData:[{
                    name:'张三',
                    phone:'11111111111',
                    province:'四川省',
                    manaBounus:1000,
                    soldBounus:1000,
                    cash:1000,
                    order_quantity:1000,
                    order_number:'32132321',
                    company:'机械场',
                    create_time:'2021-03-11T10:24:15.670Z',
                    product_name:'年卡',
                    pay_method:'微信',
                    pay_date:'2021-03-11T10:24:15.670Z'
                }],
                queryName:'',//查询姓名
                queryCompany:'',//查询单位
                queryOrderType:1,//查询订单类型
                queryCardType:1,//查询卡类型
                queryStartTime:'',//查询开始日期
                queryEndTime:'',//查询截止日期
                datePicker:[],//日期
                currentPage: 1, // 默认开始页面
                pagesize: 4,
                total: 0,
            };
        },
        created() {
            this.getOrders();
        },
        methods: {
            handleSizeChange (size) {
                console.log(`每页 ${size} 条`)
                this.pagesize = size
            },
            handleCurrentChange (currentPage) {
                this.currentPage = currentPage
                console.log(`当前页: ${currentPage}`)
            },
            getQueryOrderType(){
                console.log(this.queryOrderType);
            },
            //OrderType切换事件
            async checkoutOrderType(){
                this.getOrders();
            },
            //CardType切换事件
            async checkoutCardType(){
                this.getOrders();
            },
            //根据条件，获取所有订单
            async getOrders(){
                //转换queryOrderType
                var queryOrderType = 
                    this.queryOrderType==2?'合伙人':
                    this.queryOrderType==3?'大客户':'';
                //转换queryCardType
                var queryCardType = 
                    this.queryCardType==2?'虚拟卡':
                    this.queryCardType==3?'实体卡':'';
                console.log(this.datePicker[0]);
                //解决清空日期，datePicker被置为null，取不到数组数据的问题
                if(this.datePicker==null)this.datePicker = []
                //获取接口数据
                const {data:res} = await this.$axios.post('getOrders',{
                   name:this.queryName,
                   company:this.queryCompany,
                   orderType:queryOrderType,
                   cardType:queryCardType,
                   startTime:null,
                   endTime:null,
                });
               this.orderListData = res.res;
               console.log(this.datePicker[0]);
            },

            //导出Excel
            exportExcel(excelName) {
                //excelName --设置导出的excel名称
                //report-table --对应的要导出的el-table的ref名称
                try {
                    const $e = this.$refs['orderListData'].$el;
                    // 如果表格加了fixed属性，则导出的文件会生产两份一样的数据，所以可在这里判断一下
                    let $table = $e.querySelector('.el-table__fixed');
                    if (!$table) {
                    $table = $e;
                    }
                    // 为了返回单元格原始字符串，设置{ raw: true }
                    const wb = XLSX.utils.table_to_book($table, { raw: true });
                    const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
                    FileSaver.saveAs(
                        new Blob([wbout], { type: 'application/octet-stream' }),
                        `${excelName}.xlsx`,
                    );
                } catch (e) {
                    if (typeof console !== 'undefined') console.error(e);
                }
            },
        },

    }
</script>

<style lang="" scoped>

</style>